<gm:page title="Mashup" css="/css/g.css" class="googleTheme"> 
<!-- The mashup application demonstrates taking a external RSS feed with geo-location information and mapping it on a Google Map. Interaction between a list and a map is also demonstrated via the handleEvent tag. @author: GME Team --> 
<div class="gm-app-header">
 <table> 
<tr> 
 <td width="200">
 <h1>My Mashup</h1>
 </td> 
 </tr> 
<tr> 
 <td>Group Member: Cen Ketie, Ding Yanjing</td> 
 </tr> 
</table> 
</div>
 
<table width="900"> 
<tr valign="top"> 
<td width="300"> 
<gm:list id="cityList" data="http://weather.yahooapis.com/forecastrss?p=CHXX0008&u=c" pagesize="1" template="cityInfoTemplate">
 <gm:handleEvent src="cityMap" event="select"/> </gm:list> 
</td>
 <td class="mainPanel"> 
<gm:map id="cityMap" height="500px" data="${cityList}" latref="geo:lat" lngref="geo:long" lat="38.93" lng="116.28"  infotemplate="detailTemplate"> 
<gm:handleEvent src="cityList" event="select"/> 
</gm:map> 
</td>
 </tr> 
</table> 

<gm:template id="cityInfoTemplate"> 
<table width="100%" class="black-theme"> 
    <thead>
    <tr> 
       <td colspan="2">Citys</td>
    </tr> 
    </thead>
      <tbody repeat="true">
      <tr> 
         <td><gm:text ref="atom:title" style="overflow:hidden"/></td> 
          <td><gm:editButtons/></td> 
      </tr> 
      </tbody> 
    <tfoot>
     <tr> 
     <td colspan="2" align="left"> 
      <gm:pager/> 
     </td> 
      </tr>
    </tfoot>
 </table> 
</gm:template>

 
 <gm:template id="detailTemplate">
 <div repeat="true"> <gm:html ref="atom:summary"/>
 </div>
 </gm:template>

  <script>
    function switchData(){
      var listModule = google.mashups.getObjectById('cityListcityList');
      listModule.setData('http://google-code-updates.blogspot.com/atom.xml');
    }
  </script>

</gm:page>










